import { Button } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar";
import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card";
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
import { Checkbox } from "@/components/ui/checkbox";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
import { Label } from "@/components/ui/label";
import { Separator } from "@/components/ui/separator";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Textarea } from "@/components/ui/textarea";

export default function ComponentsPage() {
  return (
    <div className="space-y-8">
      <div className="space-y-4">
        <h1 className="text-3xl font-bold">Shadcn/UI 组件展示</h1>
        <p className="text-muted-foreground">展示系统中可用的所有UI组件</p>
      </div>

      {/* 按钮和徽章 */}
      <div className="space-y-4">
        <h2 className="text-xl font-semibold">按钮和徽章</h2>
        <div className="flex items-center gap-4 flex-wrap">
          <Button>默认按钮</Button>
          <Button variant="destructive">删除按钮</Button>
          <Button variant="outline">轮廓按钮</Button>
          <Button variant="secondary">次要按钮</Button>
          <Button variant="ghost">幽灵按钮</Button>
          <Button variant="link">链接按钮</Button>
          <Badge>新消息</Badge>
          <Badge variant="secondary">次要</Badge>
          <Badge variant="outline">轮廓</Badge>
        </div>
      </div>

      <Separator />

      {/* 头像和下拉菜单 */}
      <div className="space-y-4">
        <h2 className="text-xl font-semibold">头像和下拉菜单</h2>
        <div className="flex items-center gap-4">
          <Avatar>
            <AvatarImage src="https://github.com/shadcn.png" />
            <AvatarFallback>CN</AvatarFallback>
          </Avatar>
          
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="outline">打开菜单</Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent>
              <DropdownMenuLabel>我的账户</DropdownMenuLabel>
              <DropdownMenuSeparator />
              <DropdownMenuItem>个人资料</DropdownMenuItem>
              <DropdownMenuItem>设置</DropdownMenuItem>
              <DropdownMenuItem>退出登录</DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </div>

      <Separator />

      {/* 标签页 */}
      <div className="space-y-4">
        <h2 className="text-xl font-semibold">标签页</h2>
        <Tabs defaultValue="account" className="w-[400px]">
          <TabsList className="grid w-full grid-cols-2">
            <TabsTrigger value="account">账户</TabsTrigger>
            <TabsTrigger value="password">密码</TabsTrigger>
          </TabsList>
          <TabsContent value="account">
            <Card>
              <CardHeader>
                <CardTitle>账户</CardTitle>
                <CardDescription>在这里修改你的账户信息</CardDescription>
              </CardHeader>
              <CardContent className="space-y-2">
                <div className="space-y-1">
                  <Label htmlFor="name">姓名</Label>
                  <Input id="name" defaultValue="张三" />
                </div>
                <div className="space-y-1">
                  <Label htmlFor="username">用户名</Label>
                  <Input id="username" defaultValue="@zhangsan" />
                </div>
              </CardContent>
              <CardFooter>
                <Button>保存修改</Button>
              </CardFooter>
            </Card>
          </TabsContent>
          <TabsContent value="password">
            <Card>
              <CardHeader>
                <CardTitle>密码</CardTitle>
                <CardDescription>在这里修改你的密码</CardDescription>
              </CardHeader>
              <CardContent className="space-y-2">
                <div className="space-y-1">
                  <Label htmlFor="current">当前密码</Label>
                  <Input id="current" type="password" />
                </div>
                <div className="space-y-1">
                  <Label htmlFor="new">新密码</Label>
                  <Input id="new" type="password" />
                </div>
              </CardContent>
              <CardFooter>
                <Button>修改密码</Button>
              </CardFooter>
            </Card>
          </TabsContent>
        </Tabs>
      </div>

      <Separator />

      {/* 对话框 */}
      <div className="space-y-4">
        <h2 className="text-xl font-semibold">对话框</h2>
        <Dialog>
          <DialogTrigger asChild>
            <Button variant="outline">打开对话框</Button>
          </DialogTrigger>
          <DialogContent className="sm:max-w-[425px]">
            <DialogHeader>
              <DialogTitle>编辑个人资料</DialogTitle>
              <DialogDescription>
                在这里修改你的个人信息。完成后点击保存。
              </DialogDescription>
            </DialogHeader>
            <div className="grid gap-4 py-4">
              <div className="grid grid-cols-4 items-center gap-4">
                <Label htmlFor="name" className="text-right">
                  姓名
                </Label>
                <Input id="name" defaultValue="张三" className="col-span-3" />
              </div>
              <div className="grid grid-cols-4 items-center gap-4">
                <Label htmlFor="username" className="text-right">
                  用户名
                </Label>
                <Input id="username" defaultValue="@zhangsan" className="col-span-3" />
              </div>
              <div className="grid grid-cols-4 items-center gap-4">
                <Label htmlFor="bio" className="text-right">
                  简介
                </Label>
                <Textarea id="bio" defaultValue="我是Next.js开发者" className="col-span-3" />
              </div>
            </div>
            <DialogFooter>
              <Button type="submit">保存修改</Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </div>

      <Separator />

      {/* 警告提示 */}
      <div className="space-y-4">
        <h2 className="text-xl font-semibold">警告提示</h2>
        <Alert>
          <AlertTitle>提示信息</AlertTitle>
          <AlertDescription>
            这是一个重要的提示信息，请仔细阅读。
          </AlertDescription>
        </Alert>
      </div>

      <Separator />

      {/* 基础组件 */}
      <div className="space-y-4">
        <h2 className="text-xl font-semibold">基础组件</h2>
        <div className="grid gap-4 md:grid-cols-2">
          <Card>
            <CardHeader>
              <CardTitle>日历</CardTitle>
              <CardDescription>选择日期</CardDescription>
            </CardHeader>
            <CardContent>
              <Calendar mode="single" />
            </CardContent>
          </Card>
          
          <Card>
            <CardHeader>
              <CardTitle>轮播图</CardTitle>
              <CardDescription>图片轮播</CardDescription>
            </CardHeader>
            <CardContent>
              <Carousel className="w-full max-w-xs">
                <CarouselContent>
                  <CarouselItem>
                    <div className="p-1">
                      <Card>
                        <CardContent className="flex aspect-square items-center justify-center p-6">
                          <span className="text-4xl font-semibold">1</span>
                        </CardContent>
                      </Card>
                    </div>
                  </CarouselItem>
                  <CarouselItem>
                    <div className="p-1">
                      <Card>
                        <CardContent className="flex aspect-square items-center justify-center p-6">
                          <span className="text-4xl font-semibold">2</span>
                        </CardContent>
                      </Card>
                    </div>
                  </CarouselItem>
                  <CarouselItem>
                    <div className="p-1">
                      <Card>
                        <CardContent className="flex aspect-square items-center justify-center p-6">
                          <span className="text-4xl font-semibold">3</span>
                        </CardContent>
                      </Card>
                    </div>
                  </CarouselItem>
                </CarouselContent>
                <CarouselPrevious />
                <CarouselNext />
              </Carousel>
            </CardContent>
          </Card>
        </div>
      </div>

      <Separator />

      {/* 表单组件 */}
      <div className="space-y-4">
        <h2 className="text-xl font-semibold">表单组件</h2>
        <div className="grid gap-4 max-w-md">
          <Input type="text" placeholder="请输入文本..." />
          <Textarea placeholder="请输入多行文本..." />
          <Select>
            <SelectTrigger>
              <SelectValue placeholder="请选择一个选项" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="option1">选项1</SelectItem>
              <SelectItem value="option2">选项2</SelectItem>
              <SelectItem value="option3">选项3</SelectItem>
            </SelectContent>
          </Select>
          <div className="flex items-center space-x-2">
            <Checkbox id="terms" />
            <Label htmlFor="terms">我同意条款和条件</Label>
          </div>
        </div>
      </div>
    </div>
  );
} 